<template>
	<div class="search-list">
		<div class="headers">
			<Header></Header>
			<ul>
				<li>
					<div>综合</div>
				</li>
				<li>
					<div>销量</div>
				</li>
				<li>
					<div>新品</div>
				</li>
				<li>
					<div>价格</div>
				</li>
			</ul>
		</div>
		<section>
			<ul>
				<li>
					<img src="/public/images/list-1.webp" alt="" />
					<h3>拉链连帽衫燕尾大码女夏季遮肚子显瘦短袖t恤胖mm小众正肩上衣</h3>
					<div class="price">
						<div>
							<span>￥</span>
							<b>0</b>
						</div>
						<div>999+☆</div>
					</div>
				</li>
				<li>
					<img src="/public/images/list-2.webp" alt="" />
					<h3>拉链连帽衫燕尾大码女夏季遮肚子显瘦短袖t恤胖mm小众正肩上衣</h3>
					<div class="price">
						<div>
							<span>￥</span>
							<b>199</b>
						</div>
						<div>999+☆</div>
					</div>
				</li>
				<li>
					<img src="/public/images/list-3.webp" alt="" />
					<h3>拉链连帽衫燕尾大码女夏季遮肚子显瘦短袖t恤胖mm小众正肩上衣</h3>
					<div class="price">
						<div>
							<span>￥</span>
							<b>9.9</b>
						</div>
						<div>999+☆</div>
					</div>
				</li>
				<li>
					<img src="/public/images/list-4.webp" alt="" />
					<h3>拉链连帽衫燕尾大码女夏季遮肚子显瘦短袖t恤胖mm小众正肩上衣</h3>
					<div class="price">
						<div>
							<span>￥</span>
							<b>19.9</b>
						</div>
						<div>999+☆</div>
					</div>
				</li>
			</ul>
		</section>
	</div>
</template>

<script setup>
	import Header from '../../components/Search/Header.vue'
</script>

<style scoped>
	.search-list {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 150vh;
		overflow: hidden;
	}

	.headers ul {
		display: flex;
		justify-content: space-around;
		padding: 0.2rem 0;
		font-size: 0.8rem;
		background-color: #fff;
        color: rgb(227, 90, 90);
	}

	.headers ul li {
		display: flex;
		align-items: center;
	}

	.headers ul li>div {
		padding: 0rem;
	}

	section {
		flex: 1;
		overflow: hidden;
	}

	section ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	section ul li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 50%;
		padding: 0.5rem;
	}

	section ul li img {
		width: 10rem;
		height: 11rem;
	}

	section ul li h3 {
		width: 100%;
		font-size: 0.6rem;
		color: #222;
		font-weight: 400;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		background-color: #ffffff;
	}

	section ul li .price {
		display: flex;
		justify-content: space-between;
		padding: 0.166666rem 0.16666rem;
		width: 100%;
		font-size: 14px;
		background-color: #fff;
	}

	section ul li .price div:first-child span {
		font-size: 0.6rem;
		color: black;
	}
</style>